<template>
  <div class="community-container">
    <!-- 导航栏 -->
    <header class="community-header">
      <div class="logo">交流社区</div>
      <div class="search-container">
        <input
          type="text"
          v-model="searchKeyword"
          placeholder="请输入帖子标题或作者姓名"
          @keyup.enter="handleSearch"
        />
        <button class="search-btn" @click="handleSearch">
          <i class="search-icon"></i>
          查询
        </button>
      </div>
      <button class="post-btn" @click="openPostDialog">
        发帖
      </button>
       <button class="my-btn" @click="goToMyDiscussion">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#2c5282" width="24" height="24">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>
  </svg>
</button>
    </header>
<main class="community-main">
      <!-- 帖子列表 -->
      <section class="posts-container">
        <!-- 分类区域 - 修改为直接列出按钮 -->
        <div class="category-filter-area">
          <div class="category-title">分类</div>
          <div class="category-divider"></div>
          <div class="category-buttons">
            <button
              class="category-btn"
              :class="{ active: activeCategory === '' }"
              @click="filterByCategory('')"
            >
              全部
            </button>
            <button
              v-for="item in courseList"
              :key="item.courseId"
              class="category-btn"
              :class="{ active: activeCategory === item.courseName }"
              @click="filterByCategory(item.courseName)"
            >
              {{ item.courseName }}
            </button>
          </div>
          <div class="category-divider"></div>
        </div>
        <div
          class="post-card"
          v-for="post in posts"
          :key="post.topicId"
           @click="showTopicDetail(post)" 
        >
          <div class="post-header">
            <div class="post-meta">
              <span class="category-tag">{{ post.courseName || post.course_name || '无科目' }}</span>
              <span class="post-date">{{ formatDate(post.createTime) }}</span>
            </div>
          </div>
          <div class="post-content">
            <h3 class="post-title">{{ post.title }}</h3>
            <p class="post-text" v-html="post.content"></p>
          </div>
          <div class="post-footer">
            <div class="post-stats">
              <div class="view-stat">
                <el-icon><View /></el-icon>
                <span>{{ post.view_count || post.viewCount || 0 }}</span>
              </div>
              <div class="comment-stat" @click.stop="showComments(post.topicId)">
                <el-icon><ChatDotRound /></el-icon>
                <span>{{ post.reply_count || post.replyCount || 0 }}</span>
              </div>
            </div>
            <div class="post-author">作者：{{ post.username || '匿名' }}</div>
          </div>
        </div>
        <div v-if="posts.length === 0" class="no-posts-tip">
          无相关帖子
        </div>
        <el-pagination
          v-if="total > pageSize"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="total, prev, pager, next"
          @current-change="handleCurrentChange"
          style="margin-top: 20px; text-align: right;"
        />
      </section>

      <aside class="sidebar">
        <div class="sidebar-card popular-categories">
          <h3>一月内热议科目</h3>
          <div class="category-buttons">
            <button
              v-for="item in hotCategories"
              :key="item.course_name"
              class="category-btn"
              @click="filterByCategory(item.course_name)"
            >
              {{ item.course_name }}（{{ item.post_count }}）
            </button>
          </div>
        </div>

        <div class="sidebar-card trending-topics">
          <div style="display:flex;justify-content:space-between;align-items:center;">
            <h3 style="margin:0;">今日热议</h3>
            <span style="font-size:13px;color:#888;">{{ todayDate }}</span>
          </div>
          <ul class="topic-list">
            <li
              class="topic-item"
              v-for="item in hotTopics"
              :key="item.topic_id"
              @click="goToTopic(item.topic_id)"
              style="cursor:pointer"
            >
              {{ item.title }}
            </li>
          </ul>
        </div>
      </aside>
    </main>
<!-- 在User_communication.vue中修改评论弹窗部分 -->
<el-dialog
  title="评论"
  v-model="commentDialogVisible"
  width="600px"
  @close="resetCommentForm"
  :modal-append-to-body="true"
  :center="true"
>
  <div v-if="commentList.length === 0" style="color:#999;text-align:center;padding:20px;">
    暂无评论，快来抢沙发吧！
  </div>
  <div v-else>
    <div v-for="comment in commentList" :key="comment.commentId" class="comment-item" style="margin-bottom:18px;">
      <div style="font-weight:600;">{{ getUsername(comment.userId) }}</div>
      <div style="margin:6px 0;" v-html="comment.content"></div>
      <div style="font-size:12px;color:#888;">
        {{ formatDate(comment.createTime) }}{{ comment.likeCount }}
      </div>
    </div>
  </div>
  <el-pagination
    v-if="commentTotal > commentPageSize"
    :current-page="commentCurrentPage"
    :page-size="commentPageSize"
    :total="commentTotal"
    layout="prev, pager, next"
    @current-change="handleCommentPageChange"
    style="margin-top: 15px; justify-content: center;"
  />
  <el-form :model="commentForm" label-width="70px" style="margin-top:18px;" ref="commentFormRef">
    <!-- 更新后的富文本编辑器部分 -->
      <el-form-item label="内容" class="comment-content-item">
        <div class="editor-container">
          <div class="toolbar">
  <!-- 基础格式 -->
  <div class="toolbar-group">
    <button type="button" @click="execCommand('bold', null, 'comment')" title="加粗" class="toolbar-btn">
      <i class="fas fa-bold"></i>
    </button>
    <button type="button" @click="execCommand('italic', null, 'comment')" title="斜体" class="toolbar-btn">
      <i class="fas fa-italic"></i>
    </button>
    <button type="button" @click="execCommand('underline', null, 'comment')" title="下划线" class="toolbar-btn">
      <i class="fas fa-underline"></i>
    </button>
  </div>
  
  <div class="divider"></div>
  
  <!-- 字体样式 -->
  <div class="toolbar-group">
    <el-popover placement="bottom" width="200" trigger="click">
      <div class="font-family-panel">
        <div v-for="font in fontOptions" :key="font.value" class="font-option" 
             :style="{ fontFamily: font.value }" @click="setFontFamily(font.value, 'comment')">
          {{ font.label }}
        </div>
      </div>
      <template #reference>
        <button type="button" title="字体" class="toolbar-btn">
          <i class="fas fa-font"></i>
        </button>
      </template>
    </el-popover>
    
    <el-popover placement="bottom" width="120" trigger="click">
      <div class="font-size-panel">
        <div v-for="size in sizeOptions" :key="size" class="size-option" 
             @click="setFontSize(size, 'comment')">
          {{ size }}
        </div>
      </div>
      <template #reference>
        <button type="button" title="字号" class="toolbar-btn">
          <i class="fas fa-text-height"></i>
        </button>
      </template>
    </el-popover>
    
    <el-color-picker v-model="fontColor" @change="(color) => setFontColor(color, 'comment')" 
                    class="toolbar-color-picker" show-alpha :predefine="predefineColors" />
  </div>
  
  <div class="divider"></div>
  
  <!-- 对齐和列表 -->
  <div class="toolbar-group">
    <button type="button" @click="setTextAlign('left', 'comment')" title="居左对齐" class="toolbar-btn">
      <i class="fas fa-align-left"></i>
    </button>
    <button type="button" @click="setTextAlign('center', 'comment')" title="居中对齐" class="toolbar-btn">
      <i class="fas fa-align-center"></i>
    </button>
    <button type="button" @click="setTextAlign('right', 'comment')" title="居右对齐" class="toolbar-btn">
      <i class="fas fa-align-right"></i>
    </button>
    
    <button type="button" @click="execCommand('insertUnorderedList', null, 'comment')" 
            title="无序列表" class="toolbar-btn">
      <i class="fas fa-list-ul"></i>
    </button>
    <button type="button" @click="execCommand('insertOrderedList', null, 'comment')" 
            title="有序列表" class="toolbar-btn">
      <i class="fas fa-list-ol"></i>
    </button>
  </div>
  
  <div class="divider"></div>
  
  <!-- 高级功能 -->
  <div class="toolbar-group">
    <el-popover placement="bottom" width="200" trigger="click">
      <div class="table-grid">
        <div v-for="row in 5" :key="'row-'+row" class="table-grid-row">
          <div v-for="col in 5" :key="'col-'+col" class="table-grid-cell"
               @click="insertTable(row, col, 'comment')" 
               @mouseover="hoverTableSize = `${row}x${col}`"></div>
        </div>
      </div>
      <div class="table-size-hint">{{ hoverTableSize }}</div>
      <template #reference>
        <button type="button" title="插入表格" class="toolbar-btn">
          <i class="fas fa-table"></i>
        </button>
      </template>
    </el-popover>
    
    <el-popover placement="bottom" width="300" trigger="click">
      <div class="special-chars-grid">
        <button v-for="(char, index) in specialChars" :key="index" class="char-btn" 
                @click="insertSpecialChar(char, 'comment')">
          {{ char }}
        </button>
      </div>
      <template #reference>
        <button type="button" title="特殊字符" class="toolbar-btn">
          <i class="fas fa-symbols"></i>
        </button>
      </template>
    </el-popover>
    
    <button type="button" @click="clearFormatting('comment')" title="清除格式" class="toolbar-btn">
      <i class="fas fa-eraser"></i>
    </button>
  </div>
</div>
          <div 
            ref="commentEditor" 
            class="editor" 
            contenteditable="true" 
            @input="updateCommentContent"
            placeholder="在这里输入评论..."
          ></div>
        </div>
        <div class="editor-footer">
          <span class="word-count" v-if="commentForm.content">{{ commentForm.content.length }}字</span>
          <span class="placeholder-tip">仅支持文本内容</span>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer-custom">
        <el-button @click="commentDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitComment">发布评论</el-button>
      </div>
    </template>
  </el-dialog>
  </div>
<el-dialog
    title="帖子详情"
    v-model="topicDetailDialogVisible"
    width="800px"
    :modal-append-to-body="true"
    :center="true"
    custom-class="topic-detail-dialog"
>
  <div v-if="currentTopic" class="topic-detail-container">
    <!-- 帖子头部信息 -->
    <div class="topic-header">
      <h2 class="topic-title">{{ currentTopic.title }}</h2>
      <div class="topic-meta">
        <el-tag class="category-tag" :type="getRandomTagType()">
          {{ currentTopic.courseName || '无科目' }}
        </el-tag>
        <div class="meta-info">
          <span class="post-date">
            <el-icon><Clock /></el-icon>
            {{ formatDate(currentTopic.createTime) }}
          </span>
          <span class="view-count">
            <el-icon><View /></el-icon>
            {{ currentTopic.view_count || 0 }} 浏览
          </span>
          <span class="comment-count">
            <el-icon><ChatDotRound /></el-icon>
            {{ currentTopic.reply_count || currentTopic.replyCount || 0 }} 评论
          </span>
        </div>
      </div>
    </div>
    
    <!-- 帖子内容区域 -->
    <div class="topic-content-wrapper">
      <div class="topic-content" v-html="currentTopic.content"></div>
    </div>
    
    <!-- 帖子底部信息 -->
    <div class="topic-footer">
      <div class="author-info">
        <el-avatar :src="getUserAvatar(currentTopic.username)" size="small"></el-avatar>
        <div class="author-details">
          <span class="author-name">{{ currentTopic.username || '匿名' }}</span>
          <span class="post-time">发布于 {{ formatDate(currentTopic.createTime) }}</span>
        </div>
      </div>
      <div class="action-buttons">
        <el-button 
          type="primary" 
          @click="showComments(currentTopic.topicId)"
          icon="ChatDotRound"
          class="comment-btn"
        >
          查看评论
        </el-button>
      </div>
    </div>
  </div>
</el-dialog>
</template>

<script>
import { useUserStore } from '../../../store/UserStore'
import axios from 'axios'
import { View, ChatDotRound, Clock } from '@element-plus/icons-vue'

export default {
  components: {
    View,
    ChatDotRound,
    Clock // 添加 Clock 图标组件
  },
  data() {
    return {
      posts: [],
      total: 0,
      currentPage: 1,
      pageSize: 5,
      commentPageSize: 5,
      commentCurrentPage: 1,
      commentTotal: 0,
      searchKeyword: "",
      hotCategories: [],
      hotTopics: [],
      postDialogVisible: false,
      topicDetailDialogVisible: false,
      currentTopic: null,
      postForm: {
        title: '',
        content: '',
        courseId: null,
        questionId: null,
      },
      courseList: [],
      userStore: useUserStore(),
      allUsers: [],
      commentDialogVisible: false,
      commentList: [],
      currentTopicId: null,
      commentForm: {
        content: ''
      },
      questionList: [],
      activeCategory: '',
      todayDate: '',
fontColor: '#000000',
      predefineColors: [
        '#000000',
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585'
      ],
      fontOptions: [
        { label: '默认', value: '' },
        { label: '宋体', value: 'SimSun' },
        { label: '黑体', value: 'SimHei' },
        { label: '微软雅黑', value: 'Microsoft YaHei' },
        { label: 'Arial', value: 'Arial' },
        { label: 'Times New Roman', value: 'Times New Roman' }
      ],
      sizeOptions: ['1', '2', '3', '4', '5', '6', '7'],
      specialChars: [
        '©', '®', '™', '€', '£', '¥', '§', '¶', '•', '←', '↑', '→', '↓',
        'α', 'β', 'γ', 'δ', 'ε', 'ζ', 'η', 'θ', 'λ', 'μ', 'π', 'ρ', 'σ', 'τ', 'φ', 'ω',
        '≈', '≠', '≤', '≥', '±', '×', '÷', '∞', '√', '∫', '∑', '∂', '∆', '∇'
      ],
      hoverTableSize: '1x1'
    };
  },
  methods: {

    // 设置字体
    setFontFamily(font, type) {
      this.execCommand('fontName', font, type);
    },
    
    // 设置字号
    setFontSize(size, type) {
      this.execCommand('fontSize', size, type);
    },
    
    // 设置字体颜色
    setFontColor(color, type) {
      this.execCommand('foreColor', color, type);
    },
    
    // 设置文本对齐
    setTextAlign(align, type) {
      this.execCommand('justify' + align.charAt(0).toUpperCase() + align.slice(1), null, type);
    },
    
    // 插入表格
    insertTable(rows, cols, type) {
      const editor = type === 'post' 
        ? this.$refs.postEditor 
        : this.$refs.commentEditor;
      
      let tableHtml = '<table border="1" style="width:100%;border-collapse:collapse;">';
      for (let i = 0; i < rows; i++) {
        tableHtml += '<tr>';
        for (let j = 0; j < cols; j++) {
          tableHtml += `<td style="padding:5px;">&nbsp;</td>`;
        }
        tableHtml += '</tr>';
      }
      tableHtml += '</table>';
      
      this.execCommand('insertHTML', tableHtml, type);
    },
    
    // 插入特殊字符
    insertSpecialChar(char, type) {
      this.execCommand('insertText', char, type);
    },
    
    // 清除格式
    clearFormatting(type) {
      this.execCommand('removeFormat', null, type);
      this.execCommand('unlink', null, type);
    },
    getRandomTagType() {
      const types = ['', 'success', 'info', 'warning', 'danger']
      return types[Math.floor(Math.random() * types.length)]
    },
goToMyDiscussion() {
  this.$router.push({ name: 'MyDiscussion' });
},
        // 显示帖子详情
async showTopicDetail(post) {
  this.currentTopic = post;
  this.topicDetailDialogVisible = true;
  
  // 增加浏览数
  try {
    await axios.post('http://localhost:8080/topic/increase-view-count', null, {
      params: { topicId: post.topicId }
    });
    
    // 更新浏览数显示 - 确保在原值基础上增加
    const newViewCount = (post.view_count || post.viewCount || 0) + 1;
    this.currentTopic.view_count = newViewCount;
    
    // 更新列表中的浏览数
    const index = this.posts.findIndex(p => p.topicId === post.topicId);
    if (index !== -1) {
      this.posts[index].view_count = newViewCount;
      // 同时更新可能的其他字段名
      this.posts[index].viewCount = newViewCount;
    }
  } catch (error) {
    console.error('增加浏览数失败:', error);
  }
},
    execCommand(command, value = null, type = 'post') {
      const editor = type === 'post' 
        ? this.$refs.postEditor 
        : this.$refs.commentEditor;
      document.execCommand(command, false, value);
      editor.focus();
    },
    
    updatePostContent() {
      this.postForm.content = this.$refs.postEditor.innerHTML;
    },
    
    updateCommentContent() {
      this.commentForm.content = this.$refs.commentEditor.innerHTML;
    },

    resetPostForm() {
      this.postForm = { 
        title: '', 
        content: '', 
        courseId: null, 
        questionId: null 
      };
      if (this.$refs.postEditor) {
        this.$refs.postEditor.innerHTML = '';
      }
    },

    resetCommentForm() {
      this.commentForm = { content: '' };
      if (this.$refs.commentEditor) {
        this.$refs.commentEditor.innerHTML = '';
      }
      this.commentCurrentPage = 1;
      this.commentTotal = 0;
    },

    async fetchAllUsers() {
      try {
        const response = await axios.get('http://localhost:8080/user/user_findall');
        this.allUsers = response.data;
      } catch (error) {
        console.error('获取用户信息失败:', error);
      }
    },

    getUserAvatar(username) {
      if (!username) return '/assets/default-avatar.png';
      
      if (username === this.userStore.getUserInfo?.username) {
        return this.userStore.getAvatar;
      }
      
      const user = this.allUsers.find(u => u.username === username);
      if (user && user.avatar) {
        return user.avatar;
      }
      
      return '/assets/default-avatar.png';
    },

    getUsername(userId) {
      const user = this.allUsers.find(u => u.userId === userId);
      return user ? user.username : '匿名';
    },

    async fetchPosts(page = 1, size = this.pageSize, courseName = this.activeCategory) {
      try {
        const params = {
          page,
          size,
          keyword: this.searchKeyword
        };
        if (courseName) params.courseName = courseName;
        const response = await axios.get('http://localhost:8080/topic/list-with-course', { params });
        this.posts = response.data.list;
        this.total = response.data.total;
        this.currentPage = page;
      } catch (error) {
        console.error('获取帖子列表失败:', error);
      }
    },

    handleSearch() {
      this.currentPage = 1;
      this.fetchPosts(1, this.pageSize, this.activeCategory);
    },

    handleCurrentChange(page) {
      this.fetchPosts(page, this.pageSize);
    },

    formatDate(date) {
      if (!date) return '';
      const d = new Date(date);
      const pad = n => n.toString().padStart(2, '0');
      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
    },

    fetchHotCategories() {
      axios.get('http://localhost:8080/topic/top-courses').then(res => {
        this.hotCategories = res.data || [];
      });
    },

    fetchHotTopics() {
      axios.get('http://localhost:8080/topic/hot-topics').then(res => {
        this.hotTopics = res.data || [];
      });
    },

    goToTopic(topicId) {
      axios.get('http://localhost:8080/topic/list-with-course', {
        params: {
          topicId,
          page: 1,
          size: this.pageSize
        }
      }).then(res => {
        this.posts = res.data.list;
        this.total = res.data.total;
        this.currentPage = 1;
      });
    },

    filterByCategory(courseName) {
      this.activeCategory = courseName;
      this.currentPage = 1;
      this.fetchPosts(1, this.pageSize, courseName);
    },

    openPostDialog() {
    this.$router.push('/user/communication/post')
  },

    fetchCourseList() {
      axios.get('http://localhost:8080/Courses/all').then(res => {
        this.courseList = res.data || [];
      });
    },

    async handleCourseChange(courseId) {
      this.postForm.questionId = null;
      if (!courseId) {
        this.questionList = [];
        return;
      }
      const res = await axios.get('http://localhost:8080/question/by-course', {
        params: { courseId }
      });
      this.questionList = res.data || [];
    },

    sanitizeHtml(html) {
      if (!html) return '';
      return html
        .replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '')
        .replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, function(match) {
          const allowedTags = ['b', 'i', 'u', 'strong', 'em', 'p', 'br', 'ul', 'ol', 'li', 'div', 'span'];
          const tagMatch = match.match(/<\/?(\w+)/);
          if (tagMatch && allowedTags.includes(tagMatch[1].toLowerCase())) {
            return match;
          }
          return '';
        });
    },

   async fetchComments(topicId) {
  try {
    const response = await axios.get('http://localhost:8080/topic-comment/list', {
      params: { 
        topicId,
        page: this.commentCurrentPage,
        size: this.commentPageSize
      }
    });
    this.commentList = response.data.list || [];
    this.commentTotal = response.data.total || 0;
  } catch (error) {
    console.error('获取评论失败:', error);
  }
},

handleCommentPageChange(page) {
  this.commentCurrentPage = page;
  this.fetchComments(this.currentTopicId);
},

    showComments(topicId) {
      this.currentTopicId = topicId;
      this.commentDialogVisible = true;
      this.fetchComments(topicId);
    },

 async submitComment() {
    if (this.isSubmitting) return;
    this.isSubmitting = true;
    
    try {
      const pureContent = (this.commentForm.content || '').replace(/\s/g, '').trim();
      if (!pureContent) {
        this.$message.warning('请填写评论内容');
        return;
      }
      
      const sanitizedContent = this.sanitizeHtml(this.commentForm.content);
      const userId = this.userStore.getUserInfo?.userId;
      
      if (!userId) {
        this.$message.error('请先登录');
        return;
      }
      
      const commentData = {
        userId: userId,
        topicId: this.currentTopicId,
        content: sanitizedContent
      };
      
      await axios.post('http://localhost:8080/topic-comment/add', commentData);
      this.$message.success('评论成功');
      
      // 更新评论数
      const newReplyCount = (this.currentTopic?.reply_count || this.currentTopic?.replyCount || 0) + 1;
      if (this.currentTopic) {
        this.currentTopic.reply_count = newReplyCount;
        this.currentTopic.replyCount = newReplyCount;
      }
      
      // 更新列表中的评论数
      const index = this.posts.findIndex(p => p.topicId === this.currentTopicId);
      if (index !== -1) {
        this.posts[index].reply_count = newReplyCount;
        this.posts[index].replyCount = newReplyCount;
      }
      
      this.resetCommentForm();
      await this.fetchComments(this.currentTopicId);
      
    } catch (error) {
      console.error('评论失败:', error);
      this.$message.error('评论失败，请稍后重试');
    } finally {
      this.isSubmitting = false;
    }
  }
  },
  async mounted() {
    await this.fetchAllUsers();
    await this.fetchCourseList();
    await this.fetchPosts();
    this.fetchHotCategories();
    this.fetchHotTopics();

    const d = new Date();
    const pad = n => n.toString().padStart(2, '0');
    this.todayDate = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;

    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css';
    document.head.appendChild(link);
  }
}
</script>

<style scoped>
/* 富文本编辑器容器样式 */
.editor-container {
  border: 1px solid #d4e6f7;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 15px;
}

.toolbar {
  background: #f0f8ff;
  padding: 8px;
  border-bottom: 1px solid #d4e6f7;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.toolbar-btn {
  background: white;
  border: 1px solid #d4e6f7;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #2c5282;
  transition: all 0.2s;
}

.toolbar-btn:hover {
  background: #e6f2ff;
  transform: translateY(-1px);
}

.toolbar-btn i {
  font-size: 14px;
}

.divider {
  width: 1px;
  background: #d4e6f7;
  margin: 0 5px;
  height: 24px;
}

.editor {
  min-height: 200px;
  max-height: 300px;
  overflow-y: auto;
  padding: 15px;
  outline: none;
  font-size: 14px;
  line-height: 1.6;
  background: white;
}

.editor:empty:before {
  content: attr(placeholder);
  color: #999;
}

.editor-footer {
  padding: 8px;
  background: #f0f8ff;
  border-top: 1px solid #d4e6f7;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #5a6c84;
}

.word-count {
  color: #4a90e2;
}

.placeholder-tip {
  color: #999;
}

/* 字体选择面板 */
.font-family-panel {
  padding: 8px;
}

.font-option {
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 4px;
}

.font-option:hover {
  background: #f0f8ff;
}

/* 字号选择面板 */
.font-size-panel {
  padding: 8px;
}

.size-option {
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 4px;
}

.size-option:hover {
  background: #f0f8ff;
}

/* 表格选择网格 */
.table-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
}

.table-grid-row {
  display: flex;
  gap: 2px;
}

.table-grid-cell {
  width: 20px;
  height: 20px;
  border: 1px solid #d4e6f7;
  cursor: pointer;
}

.table-grid-cell:hover {
  background: #4a90e2;
}

.table-size-hint {
  text-align: center;
  padding: 4px;
  font-size: 12px;
  color: #666;
}

/* 特殊字符网格 */
.special-chars-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  padding: 8px;
}

.char-btn {
  border: 1px solid #d4e6f7;
  background: white;
  border-radius: 4px;
  padding: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.char-btn:hover {
  background: #e6f2ff;
  transform: scale(1.1);
}


/* 整体容器 - 浅蓝色渐变背景 */
.community-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 10px 40px 10px;
  background: linear-gradient(135deg, #f5f9ff 0%, #e6f2ff 100%);
}

/* 顶部导航栏 - 白色背景带蓝色边框 */
.community-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-radius: 15px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 10px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(58, 134, 255, 0.1);
  border: 1px solid #d4e6f7;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #2c5282;
}

/* 搜索框样式 */
.search-container {
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 400px;
  margin: 0 20px;
  position: relative;
}

.search-container input {
  width: 100%;
  padding: 12px 90px 12px 22px;
  border-radius: 22px;
  border: 1.5px solid #d4e6f7;
  background: #f0f8ff;
  color: #4a5568;
  font-size: 16px;
  outline: none;
  transition: border 0.2s;
}

.search-container input:focus {
  border: 1.5px solid #4a90e2;
}

.search-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  height: 36px;
  padding: 0 20px;
  font-size: 16px;
  background: linear-gradient(135deg, #4a90e2 0%, #63b3ed 100%);
  color: white;
  border-radius: 18px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(74, 144, 226, 0.2);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.search-btn:hover {
  background: linear-gradient(135deg, #3a7bc8 0%, #5298d6 100%);
}

/* 按钮样式 */
.post-btn {
  background: linear-gradient(135deg, #4a90e2 0%, #63b3ed 100%);
  color: white;
  border-radius: 18px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(74, 144, 226, 0.2);
  border: none;
  padding: 12px 30px;
  transition: all 0.3s;
}

.post-btn:hover {
  background: linear-gradient(135deg, #3a7bc8 0%, #5298d6 100%);
  transform: translateY(-2px);
}

.my-btn {
  background: linear-gradient(135deg, #e6f7ff 0%, #b3e0ff 100%);
  color: #2c5282;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-weight: bold;
  font-size: 16px;
  box-shadow: 0 4px 16px rgba(74, 144, 226, 0.15);
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.my-btn:hover {
  background: linear-gradient(135deg, #d1e5ff 0%, #9fd0ff 100%);
  transform: scale(1.05);
}

/* 主要内容区域 */
.community-main {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  margin-top: 10px;
}

/* 帖子列表容器 */
.posts-container {
  flex: 1;
  min-width: 0;
}

/* 分类筛选区域 */
.category-filter-area {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  margin-bottom: 22px;
  padding: 18px;
  box-shadow: 0 2px 12px rgba(74, 144, 226, 0.1);
  border: 1px solid #d4e6f7;
}

.category-title {
  font-size: 18px;
  font-weight: 700;
  color: #2c5282;
  margin-bottom: 10px;
}

.category-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.category-btn {
  background: rgba(74, 144, 226, 0.1);
  color: #2c5282;
  border-radius: 18px;
  font-weight: 500;
  border: 1px solid #d4e6f7;
  padding: 8px 16px;
  margin-bottom: 8px;
  transition: all 0.3s;
}

.category-btn.active, .category-btn:hover {
  background: #4a90e2;
  color: white;
  border-color: #4a90e2;
}

/* 帖子卡片样式 */
.post-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  box-shadow: 0 4px 16px rgba(74, 144, 226, 0.1);
  padding: 20px;
  margin-bottom: 20px;
  transition: all 0.3s;
  border: 1px solid #d4e6f7;
}

.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(74, 144, 226, 0.15);
}

.post-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.category-tag {
  background: rgba(74, 144, 226, 0.1);
  color: #2c5282;
  border-radius: 12px;
  font-weight: 500;
  padding: 4px 12px;
  margin-right: 10px;
}

.post-date {
  font-size: 12px;
  color: #5a6c84;
}

.post-title {
  font-size: 18px;
  margin-bottom: 10px;
  color: #2c5282;
  font-weight: 600;
}

.post-text {
  font-size: 14px;
  line-height: 1.7;
  color: #4a5568;
  margin-bottom: 15px;
}

.post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid #e0f2fe;
}

.post-stats {
  display: flex;
  gap: 15px;
}

.view-stat, .comment-stat {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #5a6c84;
}

.post-author {
  font-size: 13px;
  color: #5a6c84;
}

/* 侧边栏样式 */
.sidebar {
  width: 300px;
}

.sidebar-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  box-shadow: 0 4px 16px rgba(74, 144, 226, 0.1);
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #d4e6f7;
}

.sidebar-card h3 {
  font-size: 16px;
  margin-bottom: 15px;
  color: #2c5282;
  border-bottom: 1px solid #e0f2fe;
  padding-bottom: 10px;
}

.topic-list {
  list-style: none;
}

.topic-item {
  padding: 10px;
  margin-bottom: 8px;
  background: rgba(74, 144, 226, 0.05);
  color: #2c5282;
  border-radius: 8px;
  transition: all 0.3s;
  border: 1px solid #d4e6f7;
}

.topic-item:hover {
  background: rgba(74, 144, 226, 0.1);
  color: #2c5282;
}

/* 分页样式 */
.el-pagination {
  --el-pagination-bg-color: #f0f8ff;
  --el-pagination-button-bg-color: #e0f2fe;
  --el-pagination-hover-bg-color: #d4e6f7;
  --el-pagination-active-bg-color: #4a90e2;
  --el-pagination-font-color: #2c5282;
  border-radius: 15px;
  padding: 10px;
}

/* 对话框样式 */
.el-dialog__wrapper .el-dialog {
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 32px rgba(74, 144, 226, 0.15);
  border: 1px solid #d4e6f7;
}

.el-dialog__header {
  color: #2c5282;
}

.dialog-footer-custom .el-button {
  border-radius: 15px;
  padding: 10px 20px;
}

.dialog-footer-custom .el-button--primary {
  background: linear-gradient(135deg, #4a90e2 0%, #63b3ed 100%);
  border: none;
}

.comment-item {
  background: #f0f8ff;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  border: 1px solid #d4e6f7;
}
/* 帖子详情对话框样式 */
.topic-detail-dialog {
  border-radius: 12px;
}

.topic-detail-dialog .el-dialog__header {
  border-bottom: 1px solid #eaeef5;
  margin-right: 0;
}

.topic-detail-container {
  padding: 0 20px 20px;
}

.topic-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f2f5;
}

.topic-title {
  font-size: 22px;
  color: #1f2d3d;
  margin-bottom: 15px;
  line-height: 1.4;
  word-break: break-word;
}

.topic-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.meta-info {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #666;
  font-size: 13px;
}

.meta-info .el-icon {
  margin-right: 4px;
  font-size: 14px;
}

.topic-content-wrapper {
  min-height: 200px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 10px 0;
  margin: 15px 0;
}

.topic-content {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
  word-break: break-word;
}

.topic-content >>> img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 10px 0;
}

.topic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid #f0f2f5;
  margin-top: 20px;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-details {
  display: flex;
  flex-direction: column;
}

.author-name {
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.post-time {
  font-size: 12px;
  color: #999;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.comment-btn {
  padding: 8px 20px;
  border-radius: 18px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  
  .community-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-container {
    max-width: 100%;
    margin: 10px 0;
  }
  
  .community-main {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
  }
  
  .category-buttons {
    justify-content: center;
  }
} 

/* 富文本编辑器容器样式 - 更新版 */
.editor-container {
  border: 1px solid #d4e6f7;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 15px;
  transition: all 0.3s;
}

.editor-container:hover {
  border-color: #a0aec0;
}

/* 工具栏样式 - 更整齐的排列 */
.toolbar {
  background: #f0f8ff;
  padding: 8px 12px;
  border-bottom: 1px solid #d4e6f7;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.toolbar-group {
  display: flex;
  gap: 6px;
  align-items: center;
}

.divider {
  width: 1px;
  height: 24px;
  background: #d4e6f7;
  margin: 0 4px;
}

.toolbar-btn {
  background: white;
  border: 1px solid #d4e6f7;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #2c5282;
  transition: all 0.2s;
}

.toolbar-btn:hover {
  background: #e6f2ff;
  transform: translateY(-1px);
}

.toolbar-btn i {
  font-size: 14px;
}

/* 增大输入框 */
.editor {
  min-height: 250px;  /* 增大高度 */
  max-height: 400px;
  overflow-y: auto;
  padding: 15px;
  outline: none;
  font-size: 14px;
  line-height: 1.6;
  background: white;
}

.editor:empty:before {
  content: attr(placeholder);
  color: #a0aec0;
  display: block;
}

.editor-footer {
  padding: 8px 12px;
  background: #f0f8ff;
  border-top: 1px solid #d4e6f7;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #5a6c84;
}

.word-count {
  color: #4a90e2;
}

.placeholder-tip {
  color: #999;
}

/* 调整颜色选择器样式 */
.toolbar-color-picker {
  height: 32px;
  width: 32px;
}

:deep(.el-color-picker__trigger) {
  width: 32px;
  height: 32px;
  border-radius: 4px;
}

/* 面板样式调整 */
.font-family-panel,
.font-size-panel,
.special-chars-grid {
  padding: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.font-option,
.size-option {
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 4px;
}

.font-option:hover,
.size-option:hover {
  background: #f0f8ff;
}

/* 表格选择网格 */
.table-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
}

.table-grid-row {
  display: flex;
  gap: 2px;
}

.table-grid-cell {
  width: 20px;
  height: 20px;
  border: 1px solid #ddd;
  cursor: pointer;
}

.table-grid-cell:hover {
  background: #4a90e2;
}

.table-size-hint {
  text-align: center;
  padding: 4px;
  font-size: 12px;
  color: #666;
}

/* 特殊字符网格 */
.special-chars-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}

.char-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d4e6f7;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.char-btn:hover {
  background: #e6f2ff;
  transform: scale(1.1);
}

.toolbar-color-picker {
  height: 30px;
  width: 30px;
  margin-right: 6px;
}

:deep(.el-color-picker__trigger) {
  width: 30px;
  height: 30px;
}
.my-btn {
  background: linear-gradient(135deg, #e6f7ff 0%, #b3e0ff 100%);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-weight: bold;
  font-size: 16px;
  box-shadow: 0 4px 16px rgba(74, 144, 226, 0.15);
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.my-btn:hover {
  background: linear-gradient(135deg, #d1e5ff 0%, #9fd0ff 100%);
  transform: scale(1.05);
}

.my-btn svg {
  width: 24px;
  height: 24px;
}
</style>